<template>
	<view class="" v-show="show">
		<uni-popup ref="popupRef" type="bottom" border-radius="10px 10px 0 0" background-color="#fff">
			<view class="select-date-header">
				<view class="select-date-header-cancel" @click="close">
					取消
				</view>
				<view class="select-date-header-confirm" @click="confirm">
					确定
				</view>
			</view>
			<view class="select-date-content">
				<picker-view v-if="showPicker" :indicator-style="indicatorStyle" :value="value" @change="bindChange"
					class="picker-view">
					<picker-view-column>
						<view class="item" v-for="(item,index) in date1List" :key="index">{{item}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in date2List" :key="index">{{item}}</view>
					</picker-view-column>
				</picker-view>
			</view>
		</uni-popup>
	</view>

</template>

<script>
import { split } from 'lodash'
	export default {
		data() {
			return {
				show: false,
				showPicker: false,
				selectVal: [0, 0]
			}
		},
		computed: {
			result() {
				const times = this.date2List[this.selectVal[1] || 0].split('-')
				const startTime = times[0]
				const endTime = times[1]
				return {
					start: `${this.date1List[this.selectVal[0] || 0]} ${startTime}:00`,
					end: `${this.date1List[this.selectVal[0] || 0]} ${endTime}:00`,
					text: `${this.date1List[this.selectVal[0] || 0]} ${this.date2List[this.selectVal[1] || 0]}`,
				}
			},
			oneDayTime() {
				return 24 * 60 * 60 * 1000
			},
			isNextDay() {
				return new Date().getHours() >= 16
			},
			date1List() {
				let result = []
				const firstDay = this.isNextDay ? new Date(new Date().getTime() + this.oneDayTime).getTime() :
					new Date().getTime()
				for (var i = 0; i < 7; i++) {
					result.push(this.$u.timeFormat(firstDay + i * this.oneDayTime))
				}
				return result
			},
			date2List() {
				let arr = [
					[9, 11],
					[11, 13],
					[13, 15],
					[15, 17],
					[17, 18],
				]
				let result = []
				for (var i = 0; i < arr.length; i++) {
					if (!this.isNextDay && this.selectVal[0] == 0) {
						const nextTime = new Date(new Date().getTime() + this.oneDayTime / 12).getHours()
						if (nextTime < arr[i][1]) {
							result.push(`${arr[i][0]}:00-${arr[i][1]}:00`)
						}
					} else {
						result.push(`${arr[i][0]}:00-${arr[i][1]}:00`)

					}
				}
				return result
			}
		},
		methods: {
			openModal() {
				this.show = true
				this.$refs.popupRef.open('bottom')
				setTimeout(() => this.showPicker = true, 500)
			},
			bindChange(e) {
				const value = e.detail.value
				this.selectVal = value
				// this.selectVal[0] = value[0] || 0
				// this.selectVal[1] = value[1] || 0
				// this.selectVal = [...this.selectVal]
				// if (value[1] > this.date2List.length - 1) {
				// 	this.selectVal[1] = 0
				// }
			},
			confirm() {
				this.$emit('confirm', this.result)
				this.$refs.popupRef.close()
				this.show = false
				this.showPicker = false
			},
			close() {
				this.$refs.popupRef.close()
				this.show = false
				this.showPicker = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.picker-view {
		width: 100vw;
		height: 400rpx;
		// margin: 0 10vw;
	}

	.select-date-header {
		display: flex;
		justify-content: space-between;
		// padding: 10rpx 20rpx;
		font-size: 34rpx;

		&-cancel {
			padding: 20rpx 30rpx;
		}

		&-confirm {
			padding: 20rpx 30rpx;
			color: #3D9C9A;
		}
	}

	.select-date-content {
		width: 100vw;
		height: 400rpx;
	}

	.item {
		text-align: center;
		line-height: 48px;
		height: 48px;
		font-size: 32rpx;
	}
</style>